<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:facelets="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:sec="http://www.springframework.org/security/tags"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<f:event type="preRenderView" listener="#{tasksTableBean.init}" />
</h:head>
<h:body>
	<script type="text/javascript">
	var time;
	var redirect;
	function timer() {
			time = setTimeout("alert('Su sesion ha expirado, por favor ingrese nuevamente')",
					1800000);
			redirect = setTimeout("window.location = 'http://www.sistemaocchi.com.ar';",
					1800001)
		}
	
	function updateTimer()
	{
		clearTimeout(timer);
		clearTimeout(redirect);
	}
	
	timer();
	
	</script>
	<link rel="stylesheet" href="/Poseidon/css/myStyle.css" type="text/css"
		media="all" />
	<h:form id="form" acceptcharset="utf8">
		<p:growl id="growl" />
		<p:ajaxStatus id="ajaxStatus"
			style="position-x:300px; position-y:300px; width:40px;height:40px;"
			onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />

		<p:dialog modal="true" widgetVar="statusDialog" draggable="false"
			zindex="5" showHeader="false" styleClass="ui-ajax-dialog"
			closable="false" position="10" resizable="false;" height="120"
			width="70">
			<p:graphicImage style="margin-left:25px;"
				value="/images/ajax-loading-occhi.gif" />
		</p:dialog>
		<p:layout fullPage="true">
			<p:dialog widgetVar="taskDialog" id="taskDialog" modal="true"
				header="Detalles de la Tarea" showEffect="slide" hideEffect="fold"
				width="600" zindex="3">
				<p:outputPanel id="selectedTaskPanel">
					<h:panelGrid columns="2" cellpadding="5">
						<h:outputLabel value="Tarea: " />
						<h:outputText value="#{tasksTableBean.selectedTask.name}" />
						<h:outputLabel value="Descripcion: " />
						<h:outputText value="#{tasksTableBean.selectedTask.description}" />
						<h:outputLabel value="Avance: " />
						<h:outputText value="#{tasksTableBean.selectedTask.progress}" />
						<h:outputLabel value="Fecha Inicial :" />
						<h:outputText value="#{tasksTableBean.selectedTask.startDate}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
						<h:outputLabel value="Fecha Final :" />
						<h:outputText value="#{tasksTableBean.selectedTask.finishDate}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
						<h:outputLabel value="Asignado a :" />
						<h:outputText
							value="#{tasksTableBean.selectedTask.employee.firstname}" />
						<h:outputLabel value="Actividad :" />
						<h:outputText value="#{tasksTableBean.selectedTask.activity.name}" />
						<h:outputLabel value="Ultimo comentario :" />
						<h:outputText
							value="#{tasksTableBean.selectedTask.comments[0].text}" />
						<h:outputLabel value="Autor :" />
						<h:outputText
							value="#{tasksTableBean.selectedTask.comments[0].employee.username}" />
						<h:outputLabel value="Fecha :" />
						<h:outputText
							value="#{tasksTableBean.selectedTask.comments[0].date}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</h:panelGrid>
					<p:commandButton
						oncomplete="taskDialog.hide(); commentsDialog.show()"
						update=":form:commentsDialogPanel" value="Modificar"
						actionListener="#{tasksTableBean.populateCommentsDialog}">

					</p:commandButton>
					<sec:authorize ifAllGranted="ROLE_SUPERUSER">
						<p:commandButton id="removeTask" process="@this" value="Borrar"
							ajax="false"
							onsuccess="activitiesTable.clearSelection();ct.clearSelection();tt.clearSelection();taskDialog.hide();"
							actionListener="#{tasksTableBean.removeTask}" disabled="false"
							widgetVar="removeTask"
							update=":form:tasksPanel :form:activitiesPanel :form:commentsPanel :form:growl" />
					</sec:authorize>
				</p:outputPanel>

			</p:dialog>

			<p:dialog widgetVar="commentsDialog" id="commentsDlg" modal="true"
				header="Modificar progreso de Tarea" showEffect="slide"
				hideEffect="click" width="700" zindex="3">
				<p:outputPanel id="commentsDialogPanel">
					<h:panelGrid columns="2" cellpadding="5" width="400">
						<h:outputText value="Tarea: " />
						<h:outputText value="#{tasksTableBean.selectedTask.name}" />
						<sec:authorize ifAllGranted="ROLE_SUPERUSER">
							<h:outputText value="Responsable: " style="float:left" />
							<p:selectOneMenu value="#{tasksTableBean.selectedTask.employee}"
								style="width:170px" converter="employeeConverter"
								id="selectTaskEmployee" effect="fade" var="p">
								<f:selectItems id="employee" value="#{tasksTableBean.employees}"
									var="employee" itemLabel="#{employee.firstname}"
									itemValue="#{employee}" />
								<p:column>
									<p:graphicImage value="/#{p.image}" width="40" height="60" />
								</p:column>

								<p:column>  
			         			       #{p.firstname}   
			            			</p:column>
							</p:selectOneMenu>
						</sec:authorize>
						<h:outputText value="Avance: " />
						<h:outputText id="commentOutput"
							value="#{tasksTableBean.selectedTask.progress}" />
						<h:inputHidden id="commentProgress"
							value="#{tasksTableBean.selectedProgress}" />
						<p:slider id="slider" for="commentProgress" step="25"
							display="commentOutput" style="width:200px" />

						<h:outputText value="Comentario" style="float:left" />
						<p:inputTextarea value="#{tasksTableBean.newComment}"
							required="true"
							requiredMessage="El comentario no ha sido agregado. Emita un comentario ademas de modificar el progreso"
							style="width:300px;height:100px;" id="commentText" />

						<f:facet name="footer">
							<p:commandButton value="Guardar"
								oncomplete="commentsDialog.hide();"
								update=":form:selectedTaskPanel :form:tasksPanel :form:commentsPanel :form:activitiesPanel :form:growl"
								actionListener="#{tasksTableBean.saveComment}">
							</p:commandButton>

						</f:facet>
					</h:panelGrid>
				</p:outputPanel>
			</p:dialog>
			<p:layoutUnit position="north" resizable="true" size="340"
				style="border-style:none;" closable="true" collapsible="true">
				<p:layout id="layout">

					<p:layoutUnit position="west" size="210">
						<ui:include src="/pages/menu.xhtml" />
					</p:layoutUnit>

					<p:layoutUnit position="center">
						<p:layout>
							<p:layoutUnit position="north">
								<p:outputPanel>
									<h:outputLabel style="float:left;position:relative"
										id="currentSelection"
										value="Usuario seleccionado:  #{tasksTableBean.selectedEmployee.firstname} #{tasksTableBean.selectedEmployee.lastname} " />

								</p:outputPanel>
							</p:layoutUnit>
							<p:layoutUnit position="center">
								<p:ring value="#{tasksTableBean.employeesForCarrusel}"
									var="employee">
									<p:column>
										<p:graphicImage width="100%" value="/#{employee.image}"
											id="currentImage"
											onclick="this.parentNode.childNodes[1].click()" />
										<p:commandButton
											update=":form:activitiesPanel :form:tasksPanel :form:commentsPanel :form:currentSelection"
											onstart="tt.clearSelection();ct.clearSelection()"
											widgetVar="updateButton" id="updateButton" immediate="true"
											style="visibility:hidden;" title="View"
											actionListener="#{tasksTableBean.handleSelectedEmployee}">
											<f:attribute name="selectedEmployee" value="#{employee}" />
										</p:commandButton>
									</p:column>
								</p:ring>
							</p:layoutUnit>
						</p:layout>
					</p:layoutUnit>
				</p:layout>
			</p:layoutUnit>


			<p:layoutUnit position="center" style="border-style:none;">
				<p:layout>
					<p:layoutUnit position="west" size="770" resizable="true"
						closable="true" collapsible="true" effect="drop">
						<h:graphicImage url="/images/headers/actividades.png" />

						<p:outputPanel id="activitiesPanel" style="text-align:center;"
							layout="block">
							<p:dataTable var="a" widgetVar="activitiesTable"
								dblClickSelect="false" value="#{tasksTableBean.activities}"
								selectionMode="single">

								<p:ajax event="rowSelect"
									listener="#{tasksTableBean.showMyTasks}"
									onstart="tt.clearSelection();ct.clearSelection()"
									process="@this" update=":form:tasksPanel :form:commentsPanel"
									onsuccess="activitiesTable.clearSelection();">
								</p:ajax>

								<p:ajax event="rowUnselect"
									listener="#{tasksTableBean.cleanTasks}"
									update=":form:activitiesPanel" />

								<p:column headerText="Actividad" sortBy="#{a.name}">
									<h:outputText value="#{a.name}" />
								</p:column>
								<p:column headerText="Descripcion" sortBy="#{a.description}">
									<h:outputText value="#{a.description}" />
								</p:column>
								<p:column headerText="%" style="width:30px;">
									<h:outputText value="#{a.progress}" />
								</p:column>
								<p:column headerText="Inicio" sortBy="#{a.startDate}"
									style="width:80px;">
									<h:outputText value="#{a.startDate}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
								</p:column>
								<p:column headerText="Fin" sortBy="#{a.finishDate}"
									style="width:80px;">
									<h:outputText value="#{a.finishDate}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
								</p:column>
								<sec:authorize ifAllGranted="ROLE_SUPERUSER">

									<p:column headerText="Borrar" style="width:80px;">
										<p:graphicImage value="/images/borrar.png" width="70px"
											height="30px" id="borrarActividad"
											onclick="this.parentNode.childNodes[1].click()" />
										<p:commandButton id="delete" process="@this" ajax="true"
											actionListener="#{tasksTableBean.deleteActivity}"
											widgetVar="deleteActivity" style="visibility:hidden;"
											update=":form:commentsPanel :form:selectedTaskPanel :form:tasksPanel :form:activitiesPanel :form:growl">
										</p:commandButton>
									</p:column>
								</sec:authorize>
								<f:facet name="footer">
									<h:panelGrid id="activitiesTableButtonContainer" columns="5">
										<sec:authorize ifAllGranted="ROLE_SUPERUSER">

											<p:graphicImage value="/images/mis_tareas.png" width="70px"
												height="30px" id="myActImg"
												title="Ver actividades del usuario seleccionado"
												onclick="document.getElementById('form:myActBtn').click()" />

											<p:graphicImage value="/images/ver_todas_las_tareas.png"
												width="70px" id="allActImg" height="30px"
												title="Mostrar Todas las Actividades Ordenadas por vencimiento de tareas "
												onclick="document.getElementById('form:allActBtn').click()" />

										</sec:authorize>


									</h:panelGrid>
								</f:facet>
							</p:dataTable>
							<p:commandButton value="Mis Actividades" id="myActBtn"
								style="visibility:hidden;" ajax="true" global="true"
								actionListener="#{tasksTableBean.showActivitiesForSelectedUser}"
								update=":form:activitiesPanel :form:tasksPanel :form:growl"
								process="@this" />
							<p:commandButton value="Todas las tareas" id="allActBtn"
								style="visibility:hidden;" ajax="true" global="true"
								actionListener="#{tasksTableBean.showAllActivitiesOrderByTaskDeadLine}"
								update=":form:activitiesPanel :form:tasksPanel :form:growl"
								process="@this" />
							<p:commandButton value="Aprobar Tareas" id="approveActBtn"
								style="visibility:hidden;" ajax="true" global="true"
								actionListener="#{tasksTableBean.showAllActivitiesWithTasksToBeApproved}"
								update=":form:activitiesPanel :form:tasksPanel :form:growl"
								process="@this" />

						</p:outputPanel>
					</p:layoutUnit>
					<p:layoutUnit position="center" resizable="true" size="600">
						<h:graphicImage url="/images/headers/tareas.png" />
						<p:outputPanel id="tasksPanel">
							<p:dataTable var="task" id="tt" widgetVar="tt"
								binding="#{tasksTableBean.tasksTable}"
								value="#{tasksTableBean.tasks}" dblClickSelect="false"
								selectionMode="single">

								<p:ajax event="rowSelect"
									listener="#{tasksTableBean.showCommentsForTask}"
									process="@this" update=":form:commentsPanel"
									onsuccess="tt.clearSelection();">
								</p:ajax>

								<p:column headerText="Tarea" sortBy="#{task.name}">
									<h:outputText value="#{task.name}" />
								</p:column>
								<p:column headerText="Responsable"
									sortBy="#{task.employee.username}" style="width:110px;">
									<h:outputText value="#{task.employee.username}" />
								</p:column>
								<p:column headerText="%" style="width:30px;">
									<h:outputText value="#{task.progress}" />
								</p:column>
								<p:column>
									<p:commandButton id="showComment" process="@this"
										actionListener="#{tasksTableBean.showCommentsForTask}"
										widgetVar="details" value="Ver detalles"
										update=":form:selectedTaskPanel :form:commentsPanel"
										oncomplete="taskDialog.show()">
										<f:setPropertyActionListener value="#{task}"
											target="#{tasksTableBean.selectedTask}" />
									</p:commandButton>

								</p:column>
								<f:facet name="footer">



									<h:panelGrid id="tasksTableButtonContainer" columns="5">
										<sec:authorize ifAllGranted="ROLE_SUPERUSER">
											<p:graphicImage value="/images/+.png" width="70px"
												height="30px" id="myTasksImg" title="Agregar Nueva Tarea"
												onclick="document.getElementById('form:addTaskBtn').click()" />
										</sec:authorize>
										<p:graphicImage value="/images/mis_tareas.png" width="70px"
											height="30px" id="myTasksTaskImg" title="Ver Mis Tareas"
											onclick="document.getElementById('form:myTasksBtn').click()" />

										<p:graphicImage value="/images/tareas_in_progress.png"
											title="Ver Tareas en progreso" width="70px" height="30px"
											id="inProgressTaskImg"
											onclick="document.getElementById('form:inProgressTaskBtn').click()" />

										<p:graphicImage value="/images/tareas_finalizadas.png"
											width="70px" height="30px" id="finishedTaskImg"
											title="Mostrar Tareas Finalizadas"
											onclick="document.getElementById('form:finishedTaskBtn').click()" />
										<p:graphicImage value="/images/ver_todas_las_tareas.png"
											width="70px" id="allTasksImg" height="30px"
											title="Mostrar Todas las tareas "
											onclick="document.getElementById('form:allTasksBtn').click()" />


									</h:panelGrid>
								</f:facet>

							</p:dataTable>
							<p:commandButton value="Agregar Tarea" id="addTaskBtn"
								styleClass="ui-white-button" ajax="false" global="false"
								style="visibility:hidden;" action="new_task?faces-redirect=true"
								actionListener="#{tasksTableBean.newTask}" immediate="true"
								process="@this" />
							<p:commandButton value="Mis Tareas" id="myTasksBtn"
								style="visibility:hidden;" ajax="true" global="true"
								actionListener="#{tasksTableBean.showMyTasks}" immediate="true"
								update=":form:tasksPanel :form:growl" process="@this" />
							<p:commandButton value="Tareas finalizadas" id="finishedTaskBtn"
								style="visibility:hidden;" ajax="true" global="true"
								actionListener="#{tasksTableBean.showFinishedTasks}"
								update=":form:tasksPanel :form:growl" process="@this" />
							<p:commandButton value="Tareas actuales" id="inProgressTaskBtn"
								style="visibility:hidden;" ajax="true" global="true"
								actionListener="#{tasksTableBean.showCurrentTasks}"
								update=":form:tasksPanel :form:growl" process="@this" />
							<p:commandButton value="Todas las tareas" id="allTasksBtn"
								style="visibility:hidden;" ajax="true" global="true"
								actionListener="#{tasksTableBean.showTasksForActivity}"
								update=":form:tasksPanel :form:growl" process="@this" />
						</p:outputPanel>
					</p:layoutUnit>
					<p:layoutUnit position="east" size="410" resizable="true"
						collapsed="true" closable="true" collapsible="true" effect="drop">
						<h:graphicImage url="/images/headers/comentarios_short.png" />
						<p:outputPanel id="commentsPanel">
							<p:dataTable var="c" id="ct" style="width:95%" widgetVar="ct"
								value="#{tasksTableBean.selectedTask.comments}">
								<p:column headerText="Comentario">
									<h:outputText value="#{c.text}" />
								</p:column>
								<p:column headerText="Usuario">
									<h:outputText value="#{c.employee.username}" />
								</p:column>
								<p:column headerText="Fecha" sortBy="#{c.date}">
									<h:outputText value="#{c.date}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
								</p:column>
							</p:dataTable>
						</p:outputPanel>
					</p:layoutUnit>
				</p:layout>
			</p:layoutUnit>
		</p:layout>
	</h:form>
</h:body>
</html>